<template>
	<view class="content">
		<!-- <view class="grid-body">
        
           <uni-card class="dangerMsgbox" title="组托今日未完成">
           	<text class="uni-body">某某客户发车问题</text><br>
           	<text class="uni-body"></text><br>
           	<text class="uni-body"></text><br>
           	<text class="uni-body"></text>
           </uni-card>
    </view> -->
		<view class="">
			<view class="button">
				<view :class="['button-item',buttonIndex==0?'button-item-tag':'']" @click="changeButton(0)">未阅读</view>
				<view :class="['button-item',buttonIndex==1?'button-item-tag':'']" @click="changeButton(1)">已阅读</view>
			</view>
			<view>
				<scroll-view scroll-y="true" class="scroll-Y">

					<view v-show="buttonIndex==0">
						<checkbox-group @change="checkboxChange">
							<label v-for="(item,index) in unreadList" :key="index" class="container">

								<uni-card class="dangerMsgbox">
									<view class="check">
										<checkbox :value="item.id" :checked="idList.includes(String(item.id))" />
									</view>

									<text class="uni-body">预警规则名称：{{item.warningRuleName}}</text><br>
									<text class="uni-body">预警单据类型：{{item.documentType}}</text><br>
									<text class="uni-body">预警单据编号：{{item.attr2}}</text><br>
									<text class="uni-body">预警内容：{{item.earlyWarningContent}}</text><br>

									<text class="uni-body uni-mt-5">预警时间：{{item.warningTime}}</text><br>



								</uni-card>

							</label>
						</checkbox-group>
					</view>

					<view v-show="buttonIndex==1">
						<view v-for="(item,index) in readList" :key="index" class="container">
							<uni-card class="">
								<text class="uni-body">预警规则名称：{{item.warningRuleName}}</text><br>
								<text class="uni-body">预警单据类型：{{item.documentType}}</text><br>
								<text class="uni-body">预警单据编号：{{item.attr2}}</text><br>
								<text class="uni-body">预警内容：{{item.earlyWarningContent}}</text><br>

								<text class="uni-body uni-mt-5">预警时间：{{item.warningTime}}</text><br>

							</uni-card>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
		<view class="">
			<button type="default" v-show="buttonIndex==0" @click="submit">标记已读</button>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth';
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userid'),
				baseUrl: getApp().globalData.config.baseUrl,
				buttonIndex: 0,
				readList: [],
				unreadList: [],
				idList: [],
				beginTime: "",
				endTime: '',
				infoList:[]
			}
		},
		onLoad() {
			console.log(uni.getStorageSync('userid'))

		},
		onShow() {
			this.getInfoList()
			console.log(this.dateTimeStr('y-m-d h:i:s'))

			console.log(this.oldTimeStr('y-m-d h:i:s'))
		},
		methods: {
			dateTimeStr(str) {
				var date = new Date(),
					year = date.getFullYear(), //年
					month = date.getMonth() + 1, //月
					day = date.getDate(), //日
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
					minute = date.getMinutes() < 10 ? date.getMinutes() : date.getMinutes(), //分
					second = date.getSeconds() < 10 ? date.getSeconds() : date.getSeconds(); //秒
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				hour >= 0 && hour <= 9 ? hour : "";
				minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
				second >= 0 && second <= 9 ? (second = "0" + second) : "";
				if (str.indexOf('y') != -1) {
					str = str.replace('y', year)
				}
				if (str.indexOf('m') != -1) {
					str = str.replace('m', month)
				}
				if (str.indexOf('d') != -1) {
					str = str.replace('d', day)
				}
				if (str.indexOf('h') != -1) {
					str = str.replace('h', hour)
				}
				if (str.indexOf('i') != -1) {
					str = str.replace('i', minute)
				}
				if (str.indexOf('s') != -1) {
					str = str.replace('s', second)
				}
				return str;
			},
			oldTimeStr(str) {
				var date = new Date(),
					year = date.getFullYear(), //年
					month = date.getMonth() + 1, //月
					day = date.getDate() - 6, //日
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
					minute = date.getMinutes() < 10 ? date.getMinutes() : date.getMinutes(), //分
					second = date.getSeconds() < 10 ? date.getSeconds() : date.getSeconds(); //秒
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				hour >= 0 && hour <= 9 ? hour : "";
				minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
				second >= 0 && second <= 9 ? (second = "0" + second) : "";
				if (str.indexOf('y') != -1) {
					str = str.replace('y', year)
				}
				if (str.indexOf('m') != -1) {
					str = str.replace('m', month)
				}
				if (str.indexOf('d') != -1) {
					str = str.replace('d', day)
				}
				if (str.indexOf('h') != -1) {
					str = str.replace('h', hour)
				}
				if (str.indexOf('i') != -1) {
					str = str.replace('i', minute)
				}
				if (str.indexOf('s') != -1) {
					str = str.replace('s', second)
				}
				return str;
			},


			changeButton(buttonIndex) {
				//显示加载框
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				this.buttonIndex = buttonIndex;
				if (buttonIndex == 1) {
					this.beginTime = this.oldTimeStr('y-m-d h:i:s')
					this.endTime = this.dateTimeStr('y-m-d h:i:s')
				}
				this.getInfoList();
				// if(buttonIndex == 0){
				// 	this.allData();
				// }else if(buttonIndex == 1){
				// 	this.notClaimed();
				// }else if(buttonIndex == 2){
				// 	this.inHand();
				// }else if(buttonIndex == 3){
				// 	this.completed();
				// }

			},


			getInfoList() {
				let that = this
				console.log(that.userId)
				console.log(that.buttonIndex)
				//显示加载框
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				uni.request({
					url: this.baseUrl + '/early/system/record/pdalist',
					data: {
						beginTime: that.beginTime,
						endTime: that.endTime,
						attr2: '', //单据编号
						attr1: that.userId, //接收人
						readingState: that.buttonIndex, //阅读状态
						pageNum: 1,
						pageSize: 100
					},
					method: 'POST',
					header: {
						'authorization': getToken()
					},
					dataType: 'json',
					success: (res) => {
						console.log(res)
						if (res.data.code == '200' || res.data.code == 200) {
							console.log(res.data.rows)
							if (that.buttonIndex == 0) {
								that.unreadList = res.data.rows
								that.unreadList.forEach(item => {

									Object.assign(item, {
										checked: false
									})

									item.warningTime = that.newDate(item.warningTime)
								});
							} else {
								that.readList = res.data.rows
								that.readList.forEach(item => {

									item.warningTime = that.newDate(item.warningTime)
								});
							}
							// console.log(that.unreadList)
							// console.log(that.readList)

							//隐藏加载框
							uni.hideLoading();
						} else {
							//隐藏加载框
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							return;
						}

					},
				})
			},
			newDate(time) {
				var date = new Date(time)
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				var h = date.getHours()
				h = h < 10 ? '0' + h : h
				var minute = date.getMinutes()
				minute = minute < 10 ? '0' + minute : minute
				var s = date.getSeconds()
				s = s < 10 ? '0' + s : s
				return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
			},
			checkboxChange: function(e) {
				console.log(e)
				console.log(e.detail.value)
				this.idList = e.detail.value
				this.infoList = []
				e.detail.value.forEach(item=>{
					this.unreadList.forEach(items=>{
						if(item==items.id){
							this.infoList.push({attr2:items.attr2,attr1:items.attr1,readingState:1})
						}
					})
					
				})
				console.log(this.infoList)
				// this.unreadList.forEach(item => {
				// 	e.detail.value.forEach(items => {
				// 		if (item.id == items) {
				// 			item.checked = true
				// 		}else{
				// 			item.checked = false
				// 		}
				// 	})

				// })



			},

			submit() {
				let that = this
				console.log(that.userId)
				console.log(that.buttonIndex)
				//显示加载框
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				let data = {}
				data.infoList = that.infoList
				// data.readingState = 1
				uni.request({
					url: this.baseUrl + '/early/system/record/update/readingstate/pda',
					data: {
						data
					},
					method: 'POST',
					header: {
						'authorization': getToken()
					},
					dataType: 'json',
					success: (res) => {
						console.log(res)
						if (res.data.code == '200' || res.data.code == 200) {
							console.log(res)
							that.idList = []
							that.getInfoList()

							//隐藏加载框
							uni.hideLoading();
						} else {
							//隐藏加载框
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							return;
						}

					},
				})
			}

		}
	}
</script>
<style>
	uni-checkbox .uni-checkbox-input {
		border-radius: 3upx !important;
		color: #ffffff !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: rgb(0, 122, 255);
		background: rgb(0, 122, 255);
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:after {
		font-size: 18px;
	}
</style>


<style lang="scss">
	// page {
	//   display: flex;
	//   flex-direction: column;
	//   box-sizing: border-box;
	//   background-color: #fff;
	//   min-height: 100%;
	//   height: auto;
	// }

	.content {


		.button {
			height: 60rpx;
			display: flex;

			.button-item {
				// 平均分布
				flex: 1;
				text-align: center;
				color: #111111;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #FFF;
			}

			.button-item-tag {
				/* color: #5BA7FF;
  		    border-bottom: 4rpx solid #5BA7FF; */
				background-color: #DDD;
			}
		}



		.item {
			padding: 10rpx;
			display: grid;

			image {
				width: 400rpx;
				margin: auto;
				margin-top: 100rpx;
			}

			text {
				text-align: center;
			}
		}

		.scroll-Y {
			height: 1100rpx;
		}

		.uni-swiper-tab {
			white-space: nowrap;
			display: flex;
			justify-content: flex-start;
		}

		.scrollx_item {
			display: inline-block;
			padding: 6px 20px;
			margin: 0 20px;
			border: 1px solid #eee;
			border-radius: 14px;
		}

	}

	// .dangerMsgbox {
	// 	display: flexbox;
	// }

	.check {
		position: relative;
		left: 300px;
	}
</style>